import React from 'react'
import './login.css'
import axios from 'axios'
import { Form, Button, Input } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'
import { MobileOutlined, UserOutlined } from '@ant-design/icons';
export default function Login() {
    let navgite = useNavigate()
    let login = async (val) => {
        let res = await axios.post('/szh/login', { ...val })
        if (res.data.code == 200) {
            navgite('/index/home')
            localStorage.setItem('accessToken', res.data.accessToken)
            localStorage.setItem('userId', res.data.userId)
            localStorage.setItem('refreshToken', res.data.refreshToken)
        } else {

        }
    }
    return (
        <div className='login'>
            <div className='login-form'>
                <h1 className='title'>Welcome to Login</h1>
                <Form
                    style={{ width: '90%', borderRadius: ".625rem" }}
                    layout='horizontal'
                    footer={
                        <>
                            <Button nativeType="submit" block type="primary">
                                登录
                            </Button>
                            <div className='sub-f'>没有账号?
                                <span className='to-reg' onClick={() => navgite('/register')}>前往注册</span>
                                <span style={{ color: '#999', padding: '0 0.125rem' }}>/</span>
                                <span onClick={() => navgite('/getpassword')}>忘记密码</span>
                            </div>
                        </>

                    }
                    onFinish={(values) => {
                        login(values)
                    }}
                >
                    <Form.Item validateTrigger="onSubmit" name='phone' label='手机号' rules={[
                        { required: true, message: '请输入手机号' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
                    ]}>
                        <Input placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item name='password' label='密码' rules={[
                        { required: true, message: '请输入密码' },
                        { max: 12, message: '请输入6-12位密码' },
                        { min: 6, message: '请输入6-12位密码' },
                    ]}>
                        <Input placeholder='请输入密码' type='password' />
                    </Form.Item>
                </Form>
                <div 
                    style={{
                        width:'100%',
                        display: 'flex',
                        justifyContent: 'center',
                        marginTop:"5rem"
                    }}
                    >
                        <div className='icon'><MobileOutlined style={{fontSize:"20px"}} onClick={()=>navgite('/plogin')} /></div>
                        <div className='icon'><UserOutlined style={{fontSize:"20px"}} onClick={()=>navgite('/facelogin')} /></div>
                </div>
            </div>


        </div>
    )
}
